<template>
  <div class="service-container">
    <!-- Header -->
    <div class="nav-header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="header-title">客户服务</div>
      <div class="header-right"></div>
    </div>

    <!-- Service Options -->
    <div class="service-options">
      <div class="section-title">常见问题</div>
      
      <div class="option-list">
        <div 
          v-for="(option, index) in serviceOptions" 
          :key="index"
          class="option-item"
          @click="navigateToFaq(option.id)"
        >
          <div class="option-icon" :style="{ backgroundColor: option.color }">
            <van-icon :name="option.icon" />
          </div>
          <div class="option-info">
            <div class="option-name">{{ option.name }}</div>
            <div class="option-desc">{{ option.description }}</div>
          </div>
          <van-icon name="arrow" class="arrow-icon" />
        </div>
      </div>
    </div>

    <!-- Contact Options -->
    <div class="contact-options">
      <div class="section-title">联系我们</div>
      
      <div class="contact-list">
        <div 
          v-for="(contact, index) in contactOptions" 
          :key="index"
          class="contact-item"
          @click="handleContact(contact.type, contact.value)"
        >
          <div class="contact-icon" :style="{ backgroundColor: contact.color }">
            <van-icon :name="contact.icon" />
          </div>
          <div class="contact-info">
            <div class="contact-name">{{ contact.name }}</div>
            <div class="contact-value">{{ contact.value }}</div>
          </div>
          <div class="contact-action">{{ contact.action }}</div>
        </div>
      </div>
    </div>

    <!-- Live Chat -->
    <div class="live-chat-section">
      <div class="chat-header">
        <div class="section-title">在线客服</div>
        <div class="online-status">
          <span class="status-dot"></span>
          <span>在线</span>
        </div>
      </div>
      
      <div class="chat-description">
        工作时间：9:00 - 22:00，实时解答您的问题
      </div>
      
      <van-button 
        type="primary" 
        block 
        class="chat-button"
        @click="startLiveChat"
      >
        开始对话
      </van-button>
    </div>

    <!-- Feedback Section -->
    <div class="feedback-section">
      <div class="section-title">意见反馈</div>
      
      <div class="feedback-form">
        <van-field
          v-model="feedback"
          rows="3"
          autosize
          type="textarea"
          placeholder="请描述您遇到的问题或建议..."
          class="feedback-input"
        />
        
        <div class="feedback-images">
          <div 
            v-for="(image, index) in feedbackImages" 
            :key="index"
            class="image-preview"
          >
            <img :src="image" />
            <div class="delete-image" @click="removeImage(index)">
              <van-icon name="cross" />
            </div>
          </div>
          
          <div class="add-image" v-if="feedbackImages.length < 3" @click="addImage">
            <van-icon name="photograph" />
            <div>添加图片</div>
          </div>
        </div>
        
        <van-button 
          type="primary" 
          block 
          class="submit-button"
          :disabled="!feedback.trim()"
          @click="submitFeedback"
        >
          提交反馈
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'

const router = useRouter()

// State variables
const feedback = ref('')
const feedbackImages = ref([])

// Service options
const serviceOptions = [
  {
    id: 'order',
    name: '订单问题',
    description: '订单状态、物流查询、订单取消等',
    icon: 'orders-o',
    color: '#1989fa'
  },
  {
    id: 'product',
    name: '商品咨询',
    description: '商品参数、使用方法、保修政策等',
    icon: 'question-o',
    color: '#ff9500'
  },
  {
    id: 'return',
    name: '退换货服务',
    description: '退款流程、换货申请、维修服务等',
    icon: 'replay',
    color: '#07c160'
  },
  {
    id: 'account',
    name: '账户问题',
    description: '登录问题、账户安全、个人信息等',
    icon: 'user-o',
    color: '#ee0a24'
  }
]

// Contact options
const contactOptions = [
  {
    type: 'phone',
    name: '客服电话',
    value: '400-123-4567',
    icon: 'phone-o',
    color: '#1989fa',
    action: '拨打'
  },
  {
    type: 'email',
    name: '邮箱',
    value: 'service@btdapp.com',
    icon: 'envelop-o',
    color: '#ff9500',
    action: '发送'
  },
  {
    type: 'wechat',
    name: '微信公众号',
    value: 'BTD-Official',
    icon: 'wechat',
    color: '#07c160',
    action: '复制'
  }
]

// Methods
const goBack = () => {
  router.back()
}

const navigateToFaq = (id) => {
  showToast(`即将跳转到${id}相关问题页面`)
  // router.push(`/faq/${id}`)
}

const handleContact = (type, value) => {
  switch (type) {
    case 'phone':
      showToast('正在拨打客服电话...')
      window.location.href = `tel:${value}`
      break
    case 'email':
      showToast('正在打开邮箱...')
      window.location.href = `mailto:${value}`
      break
    case 'wechat':
      navigator.clipboard.writeText(value)
        .then(() => showSuccessToast('微信号已复制到剪贴板'))
        .catch(() => showToast('复制失败，请手动复制'))
      break
  }
}

const startLiveChat = () => {
  showToast('正在连接客服，请稍候...')
  // router.push('/live-chat')
}

const addImage = () => {
  // 模拟添加图片
  if (feedbackImages.value.length < 3) {
    const mockImages = [
      'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=150&auto=format&fit=crop',
      'https://images.unsplash.com/photo-1522312346375-d1a52e2b99b3?q=80&w=150&auto=format&fit=crop',
      'https://images.unsplash.com/photo-1508057198894-247b23fe5ade?q=80&w=150&auto=format&fit=crop'
    ]
    
    feedbackImages.value.push(mockImages[feedbackImages.value.length])
  }
}

const removeImage = (index) => {
  feedbackImages.value.splice(index, 1)
}

const submitFeedback = () => {
  if (!feedback.value.trim()) {
    showToast('请输入反馈内容')
    return
  }
  
  showSuccessToast('感谢您的反馈，我们会尽快处理')
  feedback.value = ''
  feedbackImages.value = []
}
</script>

<style scoped>
.service-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 24px;
}

/* Header */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  background-color: white;
  max-width: 800px;
  margin: 0 auto;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.back-button {
  position: absolute;
  left: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #323233;
}

.header-right {
  width: 24px;
}

/* Section Styles */
.service-options,
.contact-options,
.live-chat-section,
.feedback-section {
  margin-top: 12px;
  padding: 16px;
  background-color: white;
}

.service-options {
  margin-top: 56px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #323233;
  margin-bottom: 16px;
}

/* Service Options */
.option-list {
  display: flex;
  flex-direction: column;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f7fa;
}

.option-item:last-child {
  border-bottom: none;
}

.option-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 20px;
}

.option-info {
  flex: 1;
}

.option-name {
  font-size: 15px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 4px;
}

.option-desc {
  font-size: 12px;
  color: #969799;
}

.arrow-icon {
  color: #c8c9cc;
}

/* Contact Options */
.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f7fa;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 20px;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 15px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 4px;
}

.contact-value {
  font-size: 13px;
  color: #646566;
}

.contact-action {
  padding: 4px 12px;
  background-color: #f2f3f5;
  border-radius: 12px;
  font-size: 12px;
  color: #646566;
}

/* Live Chat Section */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.online-status {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #07c160;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #07c160;
  margin-right: 4px;
}

.chat-description {
  font-size: 14px;
  color: #646566;
  margin-bottom: 16px;
}

.chat-button {
  background-color: #1989fa !important;
  border: none !important;
  font-weight: 500;
}

/* Feedback Section */
.feedback-form {
  display: flex;
  flex-direction: column;
}

.feedback-input {
  margin-bottom: 16px;
  background-color: #f7f8fa;
  border-radius: 8px;
}

.feedback-images {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.image-preview {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.add-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 1px dashed #c8c9cc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #969799;
  font-size: 12px;
}

.add-image .van-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.submit-button {
  background-color: #1989fa !important;
  border: none !important;
  font-weight: 500;
}
</style>